<template>
	<view class="order-detail-container">
		<view class="order-header">
			<view class="carlisence">{{orderInfo.carLicense}}</view>
			<view class="order-price">¥{{orderInfo.payableAmount}}</view>
			<view class="order-status">支付成功</view>
		</view>
		<!-- 信息展示 -->
		<view class="item-container">
			<view class="item-flex">
				<view class="label">停车场名称</view>
				<view>{{orderInfo.parkingLotName}}</view>
			</view>
			<view class="item-flex">
				<view class="label">入场时间</view>
				<view>{{orderInfo.entTime||'-'}}</view>
			</view>
			<view class="item-flex">
				<view class="label">离场时间</view>
				<view>{{orderInfo.exitTime||"-"}}</view>
			</view>
			<view class="item-flex">
				<view class="label">停车时长</view>
				<view>{{orderInfo.parkingTime||'-'}}</view>
			</view>
			<view class="item-flex">
				<view class="label">应付金额</view>
				<view>¥{{orderInfo.amountTotal||'-'}}</view>
			</view>
			<view class="item-flex">
				<view class="label">商户减免</view>
				<view>¥{{orderInfo.discountAmount||'-'}}</view>
			</view>

			<view class="item-flex" v-if="orderInfo.platformtCouponList">
				<view class="label">优惠券名称</view>
				<view>{{orderInfo.platformtCouponList[0].couponName||'-'}}</view>
			</view>
			<view class="item-flex" v-if="orderInfo.platformtCouponList">
				<view class="label">优惠券抵扣</view>
				<view>{{orderInfo.platformtCouponList[0].deductionAmount||'-'}}</view>
			</view>
			<view class="item-flex">
				<view class="label">实际支付</view>
				<view>¥{{orderInfo.payableAmount||'-'}}</view>
			</view>
		</view>
		<view class="help" bindtap="callPhone">
			对此订单有疑问
		</view>
	</view>
</template>

<script>
	import {
		getMyRecord
	} from "@/api/api"
	export default {
		data() {
			return {
				orderInfo: {}
			};
		},
		onLoad(opt) {
			console.log(opt);
			this.getListFun(opt.index)
		},
		methods: {
			async getListFun(index) {
				const result = await getMyRecord({
					openId: 'o-z5d5PEJnmaTim1CA6ezbBcVYVM',
					pageNo: 1,
					pageSize: -1
				});
				this.orderInfo = result.data.records[index]
			},
		}
	}
</script>

<style lang="less">
	.order-header {
		box-sizing: border-box;
		padding-top: 60rpx;
		margin: 0 60rpx;
		height: 284rpx;
		border-bottom: 2rpx solid rgba(164, 168, 176, 0.13);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.order-header .carlisence {
		font-size: 32rpx;
		font-weight: 400;
		color: #242A37;
		margin-bottom: 26rpx;
	}

	.order-header .order-price {
		font-size: 52rpx;
		font-weight: 400;
		color: #242A37;
		margin-bottom: 10rpx;
	}

	.order-header .order-status {
		font-size: 24rpx;
		font-weight: 400;
		color: #A4A8B0;
	}


	.item-container {
		padding: 46rpx 80rpx 64rpx 80rpx;
	}

	.item-flex {
		display: flex;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.item-flex .label {
		color: #777F8F;
	}

	.help {
		width: 690rpx;
		height: 76rpx;
		margin: 0 auto;
		background: #F3F4F5;
		border-radius: 16rpx;
		font-size: 24rpx;
		color: #242A37;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.help .icon {
		margin-right: 10rpx;
	}
</style>
